<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem ><Icon type="md-cash" /> 碎片组</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div style="text-align:right;">
            <Button type="primary" icon="md-add" @click="add">添加碎片组</Button>
        </div>

        <Card style="margin-top:20px">
            <Table :columns="columns" :data="tableData" :loading="loading" stripe border highlight-row></Table>
        </Card>

        <Modal :title="dialogTitle" v-model="dialogShow" draggable :width="600">
            <Form ref="form" :model="form" :label-width="100" :rules="rules">
                <FormItem label="碎片组名称" prop="title">
                    <Input v-model="form.title" placeholder="碎片组名称"></Input>
                </FormItem>
                <FormItem label="图片宽度" prop="width">
                    <Input v-model="form.width" placeholder="图片建议宽度"></Input>
                </FormItem>
                <FormItem label="图片高度" prop="height">
                    <Input v-model="form.height" placeholder="图片建议高度"></Input>
                </FormItem>
                <FormItem label="备注" prop="height">
                    <Input type="textarea" v-model="form.memo" placeholder="描述"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button type="primary" @click="save">确定</Button>
            </div>
        </Modal>

        <Remark :name="module"></Remark>
    </div>
</template>

<script>
    let module = 'repeat';
    export default {
        components: {
            Remark: require('../common/remark.vue') //注释说明组件（保存在数据库中）
        },
        data() {
            return {
                url: pub.apiDomain + module,
                module: module,
                dialogShow: false,
                dialogTitle: '',
                loading: true,
                form:{site:[]},    //编辑信息
                site:{},
                columns: [
                    {title: 'id', key: 'id', width:80, sortable: true, sortType: 'asc'},
                    {title: '碎片组名称', key: 'title', sortable: true},
                    {title: '宽度', key: 'width', width:80,sortable: true},
                    {title: '高度', key: 'height', width:80,sortable: true},
                    {title: '内容数量', key: 'number', width:120},
                    {title: '备注', key: 'memo', tooltip:true},
                    {title: '状态', key: 'st', width:120,sortable: true, render: (h, params) => {
                        return <i-switch type="primary" true-value={1} false-value={0} value={params.row.st}  onOn-change={value => {
                            params.row.st = value;
                            pub.stchange(this, module, params.row);
                        }}></i-switch>
                    }},
                    {
                        title: '操作',
                        width: 300,
                        key: 'action',
                        render: (h, params) => {
                            return <span>
                                <i-button type="primary" icon="ios-create-outline" style="margin-right:6px;" onClick={(e)=>{this.handleEdit(params.index, params.row)}}>编辑</i-button>
                                <i-button type="error" icon="md-trash" style="margin-right:6px;" onClick={(e)=>{this.remove(params.row.id)}}>删除</i-button>
                                <i-button type="success" icon="md-build" onClick={(e)=>{this.setting(params.row.id)}}>设置内容</i-button>
                            </span>
                        }
                    }
                ],
                tableData: [],

                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
                },
            }
        },
        mounted(){
            //接收站点变更事件
            this.bus.$on('change_site', () => {
                this.getData();
            });
        },
        created(){
            this.getData();   //由于设置了默认排序,有排序字段会自动触发sortChange操作加载列表
            //站点列表
            this.site = pub.getCache('site_list');
        },
        methods: {
            //添加
            add(){
                this.dialogShow = true;
                this.dialogTitle = '添加碎片组';
                this.form = {st: 1, site:pub.getCache('site')};
            },
            //加载内容：在翻页或搜索后
            getData(){
                this.$axios.post(this.url + '/ls', this.params).then(res => {
                    this.tableData = res.d;
                    this.loading = false;
                    this.$refs['form'].resetFields();
                });
            },
            //编辑
            handleEdit(index, row) {
                this.dialogShow = true;
                this.dialogTitle = '编辑碎片组';
                this.form = row;
            },
            //删除
            remove(id) {
                if(!confirm('确定删除吗？')) return false;
                this.$axios.get(this.url + '/del/id/' + id).then(res => {
                    this.$Message.success('删除成功');
                    this.getData();
                });
            },
            cancel() {
                this.dialogShow = false;
                this.getData();
            },
            //提交表单
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('保存成功！');
                            this.dialogShow = false;
                            this.getData();
                        })
                    } else {
                        return false;
                    }
                });
            },
            setting(id){
                this.$router.push('/repeat_item/'+id);
            },
        }
    }
</script>